<template>
  <div class="patient-page">
    <cp-nav-bar title="家庭档案" />
    <div>最多可添加6人</div>
    <div class="patient-list">
      <div class="patient-item" v-for="item in patientList" :key="item.id">
        <div class="pi-main" :class="{ active: item.defaultFlag === 1 }">
          <div class="pim-left">
            <template v-if="item.defaultFlag === 1">
              <div class="piml-top">
                <span>默认</span>
                <span>{{ item.idCard.slice(0, 4) }}***********{{ item.idCard.slice(-4) }}</span>
              </div>
              <div class="piml-middle">{{ item.name }}</div>
              <div class="piml-bottom">
                <span>{{ item.genderValue }}</span>
                <span>{{ item.age }}岁</span>
              </div>
            </template>
            <template v-else>
              <div class="piml-middle">
                <span>{{ item.name }}</span>
                <span>{{ item.idCard.slice(0, 4) }}***********{{ item.idCard.slice(-4) }}</span>
              </div>
              <div class="piml-bottom">
                <span>{{ item.genderValue }}</span>
                <span>{{ item.age }}岁</span>
              </div>
            </template>
          </div>
          <div class="pim-right">
            <CpIcon name="user-edit" @click="editBtn(item)" />
          </div>
        </div>
      </div>
    </div>
    <!-- 添加的按钮 -->
    <van-button @click="showPopup">添加</van-button>

    <van-popup v-model:show="show" position="right" :style="{ width: '100%', height: '100%' }">
      <PatientDetail @click-left="clickLeft" :currentItem="currentItem" />
    </van-popup>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getPatientListRequest } from '../../services/user'
import PatientDetail from './components/PatientDetail.vue'

const patientList = ref<any[]>([])

const getPatientList = async () => {
  const res = await getPatientListRequest()
  console.log(res.data)
  patientList.value = res.data
}

getPatientList()

// 展开弹出层
const show = ref(false)
const showPopup = () => {
  show.value = true
}

const currentItem = ref()
// 编辑的按钮
const editBtn = (item) => {
  show.value = true
  // 下面这个等号，也不能写，因为是对象，对象就不能写等号，需要用深拷贝 生成一个新地址
  currentItem.value = JSON.parse(JSON.stringify(item))
}

const clickLeft = (e) => {
  if (e === 1) {
    getPatientList()
  }
  show.value = false
  if (currentItem.value) {
    currentItem.value = null
  }
}
</script>

<style lang="scss" scoped>
.patient-page {
  .patient-list {
    margin: 0 15px;
  }
  .pi-main {
    display: flex;
    justify-content: space-between;
    // height: 100px;
    padding: 15px;
    margin: 10px 0;
    background-color: #f6f4f4;
    border-radius: 10px;
    &.active {
      border: 1px solid var(--cp-primary);
      .pim-right .cp-icon {
        color: var(--cp-primary);
      }
    }

    .pim-left {
      flex: 1;
      // background-color: #e0dede;
      // border-top-left-radius: 10px;
      // border-bottom-left-radius: 10px;
      .piml-top {
        span:first-child {
          color: #fff;
          background-color: var(--cp-primary);
          padding: 2px 5px;
          border-radius: 6px;
          margin-right: 10px;
        }
        span:last-child {
          color: #8d8d8d;
        }
      }
      .piml-middle {
        font-size: 20px;
        font-weight: bold;
        margin: 5px 0;
        span:nth-child(2) {
          font-size: 18px;
          font-weight: 400;
          margin-left: 5px;
        }
      }
      .piml-bottom {
        font-size: 18px;
        color: #8d8d8d;
        span:first-child {
          margin-right: 15px;
        }
      }
    }
    .pim-right {
      // display:flex 这个元素就叫 容器，里面的元素叫项目
      // 我们具体的项目 也可以通过设置display属性变为 容器
      flex: 0 0 50px;
      // background-color: antiquewhite;
      display: flex;
      justify-content: center;
      align-items: center;
      .cp-icon {
        font-size: 18px;
        color: #8d8d8d;
      }
    }
  }
}
</style>
